<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8" />
	<title>抽奖管理页面</title>
	<link rel="shortcut icon" href="./image/voice.png" type="image/png">
	<link rel="stylesheet" type="text/css" href="./css/common.css" />
	<link rel="stylesheet" type="text/css"
		  href="./css/animate.3.7.0.min.css">
	<link rel="stylesheet" type="text/css" href="./css/jedis-gui.css" />
	<style type="text/css">
		.fixedSearTr {
			position: absolute;
			top: 39px;
			background-color: #fafafa !important;
			z-index: 100;
		}
		.gameBtn{
			border: solid #3e3e3e;
			cursor: pointer;
		}
	</style>
</head>

<body>
<div id="voiceDataDiv" style="width: 100%; height: 100%;">
	<!-- 全局的toast提示 -->
	<div class="globalTaostDiv">
		<div
				v-for="(toast,index) in toastMessages"
				v-bind:class="{taostItem:true, successMsg: toast.type > 0, failedMsg: toast.type < 0, slideInRight: true}">
			{{toast.message}}
			<div class="closeBtn" @click="removeTaost(index)">+</div>
		</div>
	</div>
	<div class="flexContainer">
		<div class = "flex-column">
			<input type="file" id="testSourceFile" @change="fileChanged" />
		</div>
		<div class = "flex-column"><button @click="uploadExcelFile">上传</button></div>
	</div>
	<div id="myScrollDiv" class="flexContainer" style="height: calc( 100% - 100px ); overflow-y: auto;width: 50%;float: left;">
		<table class="mytable">
			<thead>
			<tr>
				<th colspan="2">
					<div class="flexContainer">
						<div class = "flex-column">编号</div>
						<div class = "flex-column">名称</div>
					</div>
				</th>
			</tr>
			</thead>
			<tbody>
				<tr v-for="(k, i) in dataList" v-show="k.show">
					<td class="rowNumber" colspan="2">
						<div class="flexContainer">
							<div :id="k.userCode" class = "flex-column" style="font-weight:bold;font-size:1.2em;">{{k.userCode}}</div>
							<div :id="k.userName" class = "flex-column">{{k.userName}}</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="myRightScrollDiv" class="flexContainer" style="height: calc( 100% - 100px ); overflow-y: auto;width: 50%;float: left;padding: 10px;">
		<div style="margin: 10px;">
			<div><span class="gameBtn" @click="resetGame()">重置游戏</span></div>
			<br><br>
			<div>
				当前抽奖
				<select v-model="currentLevel.selected" @change="changeCurrentLevel()">
					<option v-for="(k, i) in levelSetList" :value ="k.levelCode">{{k.levelCode}}</option>
				</select>
				<span class="gameBtn"  @click="updateCurrentLevel()">更新</span>
			</div>
			<br><br>
			<div>奖项列表</div><br><br>
			<div v-for="(k, i) in levelSetList" style="margin-bottom: 20px;">
				<span>{{k.levelCode}}</span>&nbsp;<span>&nbsp;
				<input placeholder="名称" v-model="k.levelName"/></span>&nbsp;
				<span>奖项总数&nbsp; <input placeholder="总数" v-model="k.count" /></span>&nbsp;
				<span>每次抽奖数&nbsp; <input placeholder="每次抽奖人数"  v-model="k.optCount"/></span>&nbsp;
			</div>
			<div>
				<span  class="gameBtn"  @click="updateLevelSet()">更新</span><br>
			</div>
			<br><br>
			<div>
				<span class="gameBtn" @click="getGameResult()">获取活动结果</span>
			</div><br><br>
			<div v-for="(v,k) in gameResult.levelInfo" style="border: solid #8e2525;width: 100%;margin-bottom: 20px;">
				<div class="levelName">{{setInfo.level_name[k]}}</div>
				<div style="width: 100%">
					<span class="levelUser" style="margin-right: 3px;" v-for="l in v">{{l}}({{gameResult.userName[l]}}), </span>
				</div>
			</div>

		</div>
	</div>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue.2.5.17.js"></script>
<script src="./js/axios.0.12.0.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
	var VoiceTestApp = new Vue({
		el: "#voiceDataDiv",
		data: {
			displayLoadingAnimation: false,
			isLoadingComplete: false,
			turnToFixed: false,
			appName: "voice test pannel",
			pageNumber: 1,
			pageSize: 50,
			setInfo: {},
			tempUserInputText:"",
			toastMessages: [],
			searchParams: {
				"userCode":"",
				"userName":""
			},
			currentLevel: {
				selected: 1
			},
			levelSetList:[
				{"levelCode":"1", "levelName":"一等奖", "count":"10", "optCount":"5"},
				{"levelCode":"2", "levelName":"2等奖", "count":"10", "optCount":"5"},
				{"levelCode":"3", "levelName":"3等奖", "count":"10", "optCount":"5"},
				{"levelCode":"4", "levelName":"4等奖", "count":"10", "optCount":"5"},
				{"levelCode":"5", "levelName":"5等奖", "count":"10", "optCount":"5"},
				{"levelCode":"6", "levelName":"6等奖", "count":"10", "optCount":"5"}
			],
			dataList:[
					{"userCode":"01","userName":"张三"},
					{"userCode":"02","userName":"李四"}
				],
			gameResult: {
				"user" : {},
				"count" : {},
				"levelInfo":{}
			}
		},
		created: function () {
			var cachedTestData = localStorage.getItem("importUserDataList");
			if (cachedTestData && cachedTestData.length > 0) {
				this.dataList = JSON.parse(cachedTestData);
			}
			// 获取配置信息
			refreshSetInfo(this);
		},
		mounted: function () {
			document.getElementById("myScrollDiv").addEventListener('scroll', this.handleScroll);
		},
		destroyed: function () {
			document.getElementById("myScrollDiv").removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			handleScroll: function() {
				var scrollTop = document.getElementById("myScrollDiv").scrollTop;
				if (scrollTop && scrollTop > 50) {
					this.turnToFixed = true;
				} else {
					this.turnToFixed = false;
				}
			},
			resetGame:function() {
				// 重置游戏
				var vm = this;
				axios.get(hostname + "/game/reset")
						.then(function (response) {
							console.log(response);
						})
						.catch(function (error) {
							addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
						});
			},
			getGameResult: function() {
				var vm = this;
				axios.get(hostname + "/game/getResult")
						.then(function (response) {
							console.log(response);
							vm.gameResult = response.data;
						})
						.catch(function (error) {
							addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
						});
			},
			changeCurrentLevel: function() {
				console.log(this.currentLevel.selected);
			},
			updateCurrentLevel: function() {
				var vm = this;
				// 获取配置信息
				axios.get(hostname + "/game/setCurrentLevel?level="+vm.currentLevel.selected)
						.then(function (response) {
							console.log(response);
							refreshSetInfo(vm);
						})
						.catch(function (error) {
							addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
						});
			},
			updateLevelSet: function() {
				var vm = this;
				for (let i = 0; i < vm.levelSetList.length; i++) {
					updateLevelSet(vm, vm.levelSetList[i]);
				}
			},
			removeTaost: function (index) {
				if (this.toastMessages[index]) {
					this.toastMessages.splice(index, 1);
				}
			},
			searchByCondition: function(e){
				var appContext = this;
				for (var ai = 0, count = appContext.dataList.length; ai < count; ai++) {
					appContext.dataList[ai].show = true;
					var markFlag = false;
					var isneedSearch = (
							appContext.searchParams["userCode"].trim().length > 0 ||
							appContext.searchParams["userName"].trim().length > 0);
					if (!isneedSearch) {
						continue;
					}
				}
			},
			fileChanged: function(file) {
				uploadFile(this, "testSourceFile");
			},
			uploadExcelFile: function() {
				uploadFile(this, "testSourceFile");
			}
		}
	});
	async function updateLevelSet(vm, changedVal) {
		console.log(changedVal);
		// 更新设置
		axios.get(hostname + "/game/setLevel?level="+changedVal.levelCode+"&name="+changedVal.levelName+"&count="+changedVal.count+"&optCount="+changedVal.optCount)
				.then(function (response) {
					console.log(response);
					refreshSetInfo(vm);
				})
				.catch(function (error) {
					addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
				});
	}
	function refreshSetInfo(vm) {
		// 获取配置信息
		axios.get(hostname + "/game/getSetInfo")
				.then(function (response) {
					vm.setInfo = response.data;
					console.log(vm.setInfo);
					localStorage.setItem("gameRecord",JSON.stringify(vm.setInfo));
					// levelSetList:[
					// 	{"levelCode":"1", "levelName":"一等奖", "count":"10", "optCount":"5"},
					var nsetlist = [];
					for (let ln in vm.setInfo.level_name){
						nsetlist.push({"levelCode":ln, "levelName":vm.setInfo.level_name[ln], "count":vm.setInfo.level_count[ln], "optCount":vm.setInfo.level_opt_count[ln]});
					}
					vm.levelSetList = nsetlist;
				})
				.catch(function (error) {
					addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
				});
	}
	function uploadFile(vueInstance, elementId) {
		var formData = new FormData(); // 声明一个FormData对象
		var formData = new window.FormData(); // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
		formData.append('file', document.getElementById(elementId).files[0]);
		axios({
			url: hostname + "/util/userExcelImport",
			data: formData,
			method: 'post',
			headers: {
				'Content-Type': 'multipart/form-data'
			}
		}).then(function (res) {
			vueInstance.dataList = res.data.data;
			console.log(vueInstance.dataList);
			localStorage.setItem("importUserDataList",JSON.stringify(vueInstance.dataList));
			addSuccessTaost(vueInstance, "数据导入成功!");
		}).catch(function (error) {
			addErrorTaost(vueInstance, 'Error! Could not reach the API. ' + error);
		}); // 发送请求
	}
</script>

</html>